<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title><{:C('web_site_name')}>---用户统计</title>
    <link rel="stylesheet" type="text/css" href="<?php echo APP_TMPL_PATH ; ?>/static/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="<?php echo APP_TMPL_PATH ; ?>/static/css/main.css"/>

    <script type="text/javascript" src="<?php echo APP_TMPL_PATH ; ?>/static/js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo APP_TMPL_PATH ; ?>/static/js/layer/lib.js"></script>
<script type="text/javascript" src="<?php echo APP_TMPL_PATH ; ?>/static/js/layer/layer.min.js"></script>
<script type="text/javascript" src="<?php echo APP_TMPL_PATH ; ?>/static/js/DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="crumb-wrap">
            <div class="crumb-list"><i class="icon-font"></i>首页<span class="crumb-step">&gt;</span><span class="crumb-name">用户统计</span></div>
        </div>
        <div class="search-wrap">
            <div class="search-content">
                <form action="#" method="post">
                    <table class="search-tab">
                        <tr>
                          
                            <th width="70">日期：</th>
                            <td>
                              <input id="" class="common-text" type="text" value="" name="begin_date" placeholder="开始日期" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"> ~~ 
                             <input id="" class="common-text" type="text" value="" name="end_date" placeholder="结束日期" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})">
                            </td>
                           <th width="70">性别:</th>
                                <td>
                             <select name="sex" style="width:90px">
                                <option value="all">请选择</option>
                                <option value="1">男</option>
                                <option value="2">女</option>  
                            </select>
                                </td>
                                <th width="70">状态:</th>
                                <td>
                             <select name="status" style="width:90px">
                                <option value="all">请选择</option>
                                <option value="1">开启</option>
                                <option value="0">关闭</option>  
                            </select>
                                </td>
                             <th width="70">统计类型:</th>  
                            <td>
                             <select name="count_type" style="width:80px">
                                <option value="1">天</option>
                                <option value="2">月</option>  
                            </select>
                                </td>
                            <td><input class="btn btn-primary btn2" name="sub" value="查询" type="button" onclick="search()">

                            </td>
                       
                     </tr>
                     </table>
                    
                </form>
            </div>
        </div>
        <div class="list-page" id="page_string"> 2 条 1/1 页</div>
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

<script>
var loadding_0  ;
var x_data = [];
var y_data = [];
var page = 1 ;
$(function () {
    common_request();
});
function common_request(){
    var url="<?php echo U("member/count");?>&inajax=1";
    var data_ = {
            'page':page,
            'time':<?php echo time();?>,
            'action':'ajax_data' , 
            'begin_date':$("input[name='begin_date']").val() , 
            'end_date':$("input[name='end_date']").val() ,              
            'status':$("#status").val(),
            'sex':$("select[name='sex']").val() ,
            'count_type':$("select[name='count_type']").val() ,
            'status':$("select[name='status']").val()
           
    } ;
    //console.dir(data_);
    $.ajax({
    type: "POST",
    url: url ,
    data: data_,
    cache:false,
    dataType:"json",
    async:false,
    success: function(msg){
        x_data = [] ;
        y_data = [];
        var shtml = '' ;
        var list = msg.resultinfo.list.list;
        for(var i in list ){
           x_data.push(list[i]['date']); 
           y_data.push(parseInt(list[i]['c'])); 
        }
        layer.close(loadding_0);
        $(".list-page").html(msg.resultinfo.list.page_string);
        make_charts();
    },
    beforeSend:function(){
         loadding_0 = layer.load('数据正在加载中。。。。。。'); 
    },
    error:function(){
        layer.msg('服务器繁忙请稍后');
        return false ;
    }
    });
}
function ajax_data(p){
    page = p  ; 
    common_request();
}
function search(){
    page = 1 ;
    common_request();
}
</script> 
<script type="text/javascript">
var chart;
function make_charts(){
    chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: '平台用户统计',
                x: -20 //center
            },
            subtitle: {
                text: '用户数',
                x: -20
            },
            xAxis: {
                categories: x_data
            },
            yAxis: {
                title: {
                    text: '用户数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +':新增 '+ this.y +'个用户';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: '注册时间',
                data: y_data
            }]
        });
}
        </script>
<script src="<?php echo APP_TMPL_PATH ; ?>/static/js/highcharts/highcharts.js"></script>

